<script>
import {
  computed,
  createVNode,
  defineComponent,
  inject,
  onMounted,
  ref,
  watch,
} from 'vue'
import { FolderOutlined, EllipsisOutlined } from '@ant-design/icons-vue'
import { cloneDeep } from 'lodash'
import { useStore } from 'vuex'
import * as Antd from 'ant-design-vue'
import { IconWenJianJia, IconXuanZhong } from '@Assets/fonts/svg'
import loadingImage from '@Assets/images/loading.gif'
import { getOneFileType } from '@Config/const'
/**
 *
 * createTime: "2022-04-16 11:20:05"
fileMd5: ""
fileSize: 0
fileType: 0
fileUrl: ""
folderLevel: 1
id: 45
lastOperatorId: 42006
lastOperatorName: "郑强子"
name: "新建文件夹"
operatorId: 42006
operatorName: "郑强子"
pid: 0
updateTime: "2022-04-16 11:20:05"
 */
export default defineComponent({
  props: {
    info: {
      type: Object,
      required: true,
    },
    role: {
      type: String,
      default: 'common', //普通模式 common ,trash:垃圾箱
    },
    rightMenuFn: {
      type: Function,
      default: () => {
        return () => {}
      },
    },
  },
  emits: ['select', 'checkBox', 'reposDrop', 'attribute'],
  setup(props, context) {
    let role = computed(() => {
      return props.role
    })
    let dbClickHandler = (e) => {
      e.preventDefault()
      e.stopPropagation()
      context.emit('select', {
        target: { ...cloneDeep(props.info) },
      })
    }

    let info = computed(() => {
      return props.info
    })

    let temp_checked = ref(false)
    //checkbox
    let changeHandler = (e) => {
      temp_checked.value = e.target.checked
      context.emit('checkBox', {
        target: { ...cloneDeep(props.info) },
        e: e,
      })
    }

    let mouseOutHandler = () => {
      //rightMenuRef.value.style.left = '-10200px'
      document.oncontextmenu = function() {
        return true
      }
    }

    let rightMenuRef = ref()
    let store = useStore()
    let imageClickHandler = (_info) => {
      store.commit('preivew', { visible: true, src: _info.fileUrl })
    }

    let fn = () => {
      return (
        <Antd.Menu selectedKeys={[]}>
          {
            //   role.value == 'trash' && (
            //   <Antd.MenuItem onClick={recoveryHandler}>
            //     <Antd.Button size="small" type="link">
            //       恢复
            //     </Antd.Button>
            //   </Antd.MenuItem>
            // )
          }

          {props.rightMenuFn(props.info)?.map((x) => {
            return (
              <Antd.MenuItem
                onClick={x.action.bind(null, { ...cloneDeep(props.info) })}
              >
                <Antd.Button size="small" type="link">
                  {x.label}
                </Antd.Button>
              </Antd.MenuItem>
            )
          })}

          {
            //   <Antd.MenuItem>
            //   <Antd.Button type="link" size="small" onClick={attributeHandler}>
            //     属性
            //   </Antd.Button>
            // </Antd.MenuItem>
          }
        </Antd.Menu>
      )
    }
    //点击文件夹中的icon
    let iconClickHandler = () => {
      temp_checked.value = !temp_checked.value
      context.emit('checkBox', {
        target: { ...cloneDeep(props.info) },
        e: {
          target: {
            checked: temp_checked.value,
          },
        },
      })
    }

    //拖动文件夹改变位置
    let reposDrop = (target) => {
      context.emit('reposDrop', {
        from: target, //a->b=a
        to: { ...cloneDeep(props.info) }, //a->b =b
      })
    }
    let img_ref = ref()

    let add = inject('addInterSectionObs')

    onMounted(() => {
      setTimeout(() => {
        if (info.value.fileType == 1) {
          add(img_ref.value)
        }
      })
    })

    return {
      reposDrop,
      dbClickHandler,
      info,
      changeHandler,
      role,
      rightMenuRef,
      mouseOutHandler,
      imageClickHandler,
      iconClickHandler,
      fn,
      store,
      img_ref,
    }
  },

  render() {
    return (
      <div
        data-folderid={this.info.id}
        //  onClick={this.iconClickHandler}
        // onContextmenu={(e) => {
        //   e.rightMenu = this.fn()
        // }}
        v-file-drag
      >
        <div class="tools">
          <a-dropdown
            vSlots={{
              overlay: () => {
                return this.fn()
              },
            }}
          >
            <EllipsisOutlined />
          </a-dropdown>
        </div>
        <div class="selector">
          {
            //   <a-checkbox
            //   onChange={this.changeHandler}
            //   checked={this.info.selected}
            // />
          }
          {this.info.selected == true && (
            <IconXuanZhong style={{ color: 'rgb(12 160 18)' }} />
          )}
        </div>

        {this.info.fileType == 0 && (
          //文件夹
          <div class="file_content">
            <IconWenJianJia class="folder_icon" title="双击打开,单击选中" />
            <div
              class={{
                fileName: true,
                'ant-statistic-title': this.store.state.folderUi == 'list',
              }}
              title={this.info.name}
            >
              {this.info.name}
            </div>
            {this.store.state.folderUi == 'list' && (
              <div class="ant-statistic-title">
                {(() => {
                  let _r = getOneFileType((x) => x.value == this.info.fileType)

                  return <span>{_r.label}</span>
                })()}
              </div>
            )}
            {this.store.state.folderUi == 'list' && (
              <div class="ant-statistic-title">{this.info.updateTime}</div>
            )}
            {this.store.state.folderUi == 'list' && (
              <div class="ant-statistic-title">{this.info.createTime}</div>
            )}
            {this.store.state.folderUi == 'list' && (
              <div class="ant-statistic-title">{this.info.operatorName}</div>
            )}
          </div>
        )}

        {this.info.fileType == 1 && this.info.fileUrl != undefined && (
          <>
            <div class="folder_image">
              <img
                title="此文件无法预览"
                ref="img_ref"
                src={loadingImage}
                data-loaded={true}
                data-src={this.info.fileUrl + `?width=120`}
                //  onDblclick={this.imageClickHandler.bind(null, this.info)}
              />

              {this.store.state.folderUi == 'list' && (
                <div class="ant-statistic-title">{this.info.name}</div>
              )}
              {this.store.state.folderUi == 'list' && (
                <div class="ant-statistic-title">
                  {(() => {
                    let _r = getOneFileType(
                      (x) => x.value == this.info.fileType
                    )

                    return <span>{_r.label}</span>
                  })()}
                </div>
              )}
              {this.store.state.folderUi == 'list' && (
                <div class="ant-statistic-title">{this.info.updateTime}</div>
              )}
              {this.store.state.folderUi == 'list' && (
                <div class="ant-statistic-title">{this.info.createTime}</div>
              )}
              {this.store.state.folderUi == 'list' && (
                <div class="ant-statistic-title">{this.info.operatorName}</div>
              )}
            </div>
            <div>{this.info.name}</div>
          </>
        )}

        {this.info.local_loading && (
          <div class="folder_loading">
            <a-spin />
          </div>
        )}
      </div>
    )
  },
})
</script>
